<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <!--可以让部分国产浏览器默认采用高速模式渲染页面-->
    <meta name="renderer" content="webkit" />
    <!--为了让 IE 浏览器运行最新的渲染模式下-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--SEO三大标签-->
    <!-- <title>塔普利斯的音乐</title>
    <meta
      name="keywords"
      content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com"
    />
    <meta
      name="description"
      content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。"
    /> -->
    <!--
      apple-touch-icon: 是苹果私有的属性
      作用: 指定将网页保存到主屏幕上的时候的图标
      -->
    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="./apple-touch-icon114.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="./apple-touch-icon152.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./apple-touch-icon180.png"
    />
    <!--网页快捷图标-->
    <link rel="icon" href="./favicon.ico" />
    <script>
      // 利用rem+视口释放的方式适配移动端
      let scale = 1.0 / window.devicePixelRatio;
      let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
      document.write(text);
      document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
      document.documentElement.setAttribute(
        "data-dpr",
        window.devicePixelRatio + ""
      );
      document.documentElement.setAttribute("data-theme", "theme");
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
<!-- 
  1初始化HTML中的代码
  2利用rem+视口释放的方式适配移动端
  注意:如果在HTML文件中用到了模板字符串，字符串中用到了变量 那么html-plugin是无法处理的 会报错
        如果想解决这个问题 那么需要借助loader，html-loader
  3借助postcss-pxtorem实现自动将px转换成rem
  4借助webpack实现css3/ES678语法兼容
  5借助fastclick解决移动端100~300ms的点击事件延迟问题
  6.初始化默认的全局样式
  在移动端中 不需要让字体大小跟随屏幕尺寸的变化而变化
  由于我们是通过视口缩放来适配移动端的，所以我们不能直接设置字体大小，否则字体大小就会随着屏幕尺寸的变化而变化
 -->
